.announce {
    position: fixed;
    z-index: 9999;
    top: 0;
    width: 34rem;
    left: calc(50% - 17rem);
    padding: 1.1rem;
    background: $brand-primary;
    border-bottom-left-radius: $border-radius;
    border-bottom-right-radius: $border-radius;
    color: white;
    text-align: center;
    pointer-events: none;
    &.announce-info {
        background-color: $brand-info;
    }
    &.announce-success {
        background-color: $brand-success;
    }
    &.announce-warning {
        background-color: $brand-warning;
    }
    &.announce-danger {
        background-color: $brand-danger;
    }
}

// XS breakpoint
@include media-breakpoint-down(xs) {
    .announce {
        width: 100%;
        left: 0;
        border-radius: 0;
        padding: .75rem;
    }
}